<template>
  <div>
    <el-form ref="form1" :model="model1">
      <el-form-item
        label="姓名："
        prop="name"
        :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
      >
        <el-input v-model="model1.name" placeholder="请输入姓名" clearable />
      </el-form-item>
    </el-form>
    <el-form ref="form2" :model="model2">
      <el-form-item
        label="性别："
        prop="gender"
        :rules="[{ required: true, message: '请输入性别', trigger: 'blur' }]"
      >
        <el-input v-model="model2.gender" placeholder="请输入性别" clearable />
      </el-form-item>
      <el-form ref="form3" :model="model3">
        <el-form-item
          label="年龄："
          prop="age"
          :rules="[
            {
              required: true,
              message: '请输入年龄',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="model3.age" placeholder="请输入年龄" clearable />
        </el-form-item>
        <el-form-item
          label="自定义样式验证"
          prop="ages"
          :rules="[
            {
              required: true,
              message: '自定义样式验证',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="model3.ages"
            placeholder="请输入原因"
            :maxlength="24"
            auto-complete="new-password"
          />
          <template slot="error" slot-scope="slot">
            <div class="el-form_tip tt">
              <div class="item_tip">
                {{ slot.error
                }}<span style="color: #1890ff">这是验证报错的结果</span>
              </div>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </el-form>
    <el-button type="primary" @click="submit">点击校验</el-button>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'MultiForm',
  data() {
    return {
      model1: {
        name: ''
      },
      model2: {
        gender: ''
      },
      model3: {
        age: '',
        ages: ''
      }
    }
  },
  mounted() {
    const _this = this
    let keyCodeString = ''
    let ktime = ''
    let arr = []
    document.onkeydown = function(e) {
      console.log(e.keyCode)
      const event = window.event || e
      if (event.keyCode != 13) {
        if (event.keyCode <= 57 && event.keyCode >= 48) {
          // 按下的时间
          ktime = ktime || new Date().getTime()
          // 键盘弹起事件
          document.onkeyup = function(e) {
            const t = new Date().getTime() - ktime
            ktime = ''
            // timeG=t<50?'0':timeG && timeG < 50
            console.log(
              '时间:' + ktime,
              '每次按下弹起的时间：',
              t,
              'event.keyCode=>',
              event.keyCode
            )
            if (t < 50) {
              // _this.$refs.idNumber.blur()
              _this.isEnter = true
              arr.push(t)
              // arr为了判断连续的数组长度为8位  识别为扫码枪输入
              const bizCode = event.key
              keyCodeString += bizCode
            } else {
              _this.isEnter = false
              arr = []
              // _this.dform=JSON.parse(JSON.stringify(_this.form))
              // keyCodeString=''尾部会多出一个相同尾数
            }
          }
        }
      } else {
        console.log(keyCodeString)
        if (keyCodeString.length > '9') {
          keyCodeString = keyCodeString.substring(
            keyCodeString.length - 9,
            keyCodeString.length
          )
        }
        console.log(arr, keyCodeString)
        // 等于Enter时触发结果值
        if (keyCodeString.length == '9' && arr.length == '9') {
          businessService
            .IsAvailable(keyCodeString)
            .then((result) => {
              if (result) {
                // console.log(keyCodeString);
                _this.form = JSON.parse(JSON.stringify(_this.dform))
                _this.form.serviceNo = keyCodeString
                keyCodeString = ''
                // _this.$refs.idNumber.focus()
              } else {
                _this.form = JSON.parse(JSON.stringify(_this.dform))
                _this.$message.error('腕带已被使用或不存在')
                keyCodeString = ''
              }
            })
            .catch((err) => {
              _this.$message.error(err)
            })
        } else {
          keyCodeString = ''
        }
      }
    }
  },
  methods: {
    // 键盘事件
    handledown() {},
    // 弹起事件
    handleup() {},
    submit() {
      const list = []
      list.push(
        this.checkForm('form1'),
        this.checkForm('form2'),
        this.checkForm('form3')
      )
      Promise.all(list)
        .then(() => {
          console.log('通过检测')
        })
        .catch(() => {
          console.log('未通过')
        })
    },
    // 检查表单是否校验通过，返回Promise
    checkForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            resolve()
          } else reject()
        })
      })
    }
  }
}
</script>
